<template>
<div class="dt">
    <!-- 地图区 -->
    <div class="map_content">
        <!-- 百度地图 -->
        <baidu-map id="BDmap" class="map" :center="center" :zoom="zoom" @ready="handler">
            <MyOverlay :position="item.position" :icon="item.icon" :deviceId="item.deviceId" @showBusDataLocation="busDataLocationShow" v-for="(item, key) in items" :key="key">
            </MyOverlay>
            <bm-polyline :path="polylinePath1" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="10" strokeStyle="solid"></bm-polyline>
            <bm-polyline :path="polylinePath2" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="10" strokeStyle="dashed"></bm-polyline>
        </baidu-map>
        <!-- 查看轨迹 -->
        <div class="CKGJ" v-show="trajectoryShow">
            <span>查看轨迹</span>
            <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
            <span>至</span>
            <el-date-picker v-model="value2" type="date" placeholder="选择日期"></el-date-picker>
            <button>重置</button>
            <button>查询</button>
        </div>
        <!-- 区域 -->
        <div class="quyu" v-show="queryShow">
            <div class="ZTinpt">
                <span>区域</span>
                <!-- <el-select v-model="value" class="qy_xz" placeholder="请选择">
            <el-option
              v-for="item in area"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->

                <el-cascader v-model="valueArea" :options="area"></el-cascader>
            </div>
            <div class="ZTinpt">
                <span>项目</span>
                <el-select v-model="valueProject" class="qy_xz" placeholder="请选择">
                    <el-option v-for="item in project" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="ZTinpt">
                <span>车牌号</span>
                <el-input v-model="busNumber" class="chepai" placeholder="请填写车牌号"></el-input>
            </div>
            <button @click="searchReset">重置</button>
            <button @click="searchArea">查询</button>
            <div class="sq"></div>
        </div>
        <!-- 右侧车辆详情区 -->
        <div class="right_detail" v-show="detailShow">
            <div>{{ this.deviceInfo.busNumber }}</div>
            <span>驾驶员</span>
            <div>{{ this.deviceInfo.busDriver }}</div>
            <span>所属公司</span>
            <div>{{ this.deviceInfo.busCompany }}</div>
            <span>登记路线</span>
            <div>{{ this.deviceInfo.busRegRoute }}</div>
            <span>运行路线</span>
            <div>{{ this.deviceInfo.busRunRoute }}</div>
            <span>蓝牙数据</span>
            <div>{{ this.deviceInfo.WiFiCount }}</div>
            <span>人脸数据</span>
            <div>{{ this.deviceInfo.FaceCount }}</div>
            <span>预警数据</span>
            <div>{{ this.deviceInfo.WarningCount }}</div>
            <span>WIFI数据</span>
            <div>{{ this.deviceInfo.BToothCount }}</div>
            <span>定位数据</span>
            <div>{{ this.deviceInfo.LocationCount }}</div>
            <span>一键报警数据</span>
            <div>{{ this.deviceInfo.AlarmCount }}</div>
            <button>查看视频</button>
            <button class="subActive">查看数据</button>
        </div>
        <!-- 右侧出事公交车 -->
        <div class="right_cs" id="right_cs" v-show="csShow">
            <div class="right_content">
<div class="cs_data">{{ this.csinfo.busNumber }}</div>
            <!-- camInfo -->
            <div class="cam_list" v-for="(cam,index) in csinfo.camInfo" :key="index">
                <span class="cam_img">设备名称</span>
                <div class="cs_data">{{ cam.cameraName||"暂未命名" }}</div>
                <span class="cam_img">摄像头{{index+1}}</span>
                <span :class="cam.camStatus == '16' ? 'inline' : 'outline'"></span>
                <div class="cs_data">{{ cam.camId||"暂未命名" }}</div>
            </div>

            <span class="pic_img">图片数量</span>
            <div class="cs_data">{{ this.csinfo.imageCollect }}</div>
            <span class="wifi_img">WIFI</span>
            <div class="cs_data">{{ this.csinfo.wifiCOllect }}</div>
            <span class="bt_img">蓝牙</span>
            <div class="cs_data">{{ this.csinfo.bluthCollect }}</div>
            <span class="jw_img">经度</span>
            <div class="cs_data">{{ this.csinfo.flongitude }}</div>
            <span class="jw_img">纬度</span>
            <div class="cs_data">{{ this.csinfo.flatitude }}</div>
            </div>
            
            <button class="subActive" @click="busDetailShow(currentDeviceId)">
                查看详情
            </button>
        </div>
        <!-- 底部详情 -->
        <div id="bottom_exit" v-show="exitShow">
            <!-- <div class="bottom_xingshi">
          <div>已行驶</div>
          <div>未行驶</div>
        </div> -->
            <div class="bottom_tuichu" @click="exitDetail">退出详情</div>
        </div>
    </div>
</div>
</template>

<script>
import MyOverlay from "./MyOverlay.vue";
import AreaDivision from "../../static/area.js";
import { reject, resolve } from "q";
export default {
    data() {
        return {
            center: {
                lng: 0,
                lat: 0
            },
            zoom: 3,
            points: [],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        },
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        },
                    },
                ],
            },
            deviceInfo: {
                busNumber: "粤A09898D",
                busDriver: "张飞",
                busCompany: "广州西部公交",
                busRegRoute: "B2",
                busRunRoute: "B2",
                WiFiCount: "589条",
                FaceCount: "653条",
                WarningCount: "223条",
                BToothCount: "562条",
                LocationCount: "86条",
                AlarmCount: "125条",
            },
            csinfo: {
                busNumber: "粤A09898D",
                sbmc: "粤A28553D-前门摄像头",
                sxt1: "44010026071960030001",
                sxt2: "44010026071960030001",
                tpsl: "100",
                wifi: "8523",
                ly: "8500",
                jd: "113°16'14",
                wd: "23°14'54",
            },
            icon: "",
            currentDeviceId: "",
            value1: "",
            value2: "",
            items: {},
            locationTimeInterval: "",
            polylinePath1: [],
            polylinePath2: [],
            value: "",
            options: [{
                value: 1,
                label: 1,
            }, ],
            area: AreaDivision.arrAll,
            project: [],
            valueArea: [],
            valueProject: "",
            busNumber: "",
            trajectoryShow: false,
            queryShow: true,
            detailShow: false,
            csShow: false,
            exitShow: false,
        };
    },
    created() {
        this.updateLocation();
        this.getAreaProject();
    },
    methods: {
        clickHandler() {
            let right_detail = document.getElementById("right_detail");
            right_detail.style.display = "none";
        },
        handler({
            BMap,
            map
        }) {
            this.center.lng = 113.947665;
            this.center.lat = 22.53295;
            this.zoom = 18;
        },
        busDataLocationShow(deviceId) {
            let _this = this;
            _this.currentDeviceId = deviceId;
            _this.$axios
                .get("businfo/dataLocation?deviceId=" + deviceId)
                .then((res) => {

                    let csinfo = res.data.data;
                    if (typeof csinfo != "undefined" && csinfo != null) {
                        // let right_cs = document.getElementById("right_cs");
                        // right_cs.style.display = "block";
                        _this.csShow = true;
                        // _this.queryShow = false;
                        _this.csinfo = {};
                        let camInfo = csinfo.cameraStatus;
                        _this.csinfo = {
                            busNumber: csinfo.installPosition || "暂无数据",
                            camInfo: camInfo,
                            imageCollect: csinfo.imageCollect ,
                            wifiCOllect: csinfo.wifiCOllect,
                            bluthCollect: csinfo.bluthCollect ,
                            flongitude: csinfo.flongitude ,
                            flatitude: csinfo.flatitude ,
                        };

                    } else {
                        _this.csShow = false;
                    }
                })
                .catch();
        },

        busDetailShow(deviceId) {
            let _this = this;
            this.currentDeviceId = deviceId;
            this.$axios
                .get("businfo/getBusData?deviceId=" + deviceId)
                .then((res) => {
                    clearInterval(this.locationTimeInterval);
                    this.items = {};
                    this.polylinePath1.push({
                        lng: 113.948254,
                        lat: 22.533453
                    }, {
                        lng: 113.946206,
                        lat: 22.532034
                    }, {
                        lng: 113.945676,
                        lat: 22.530774
                    }, {
                        lng: 113.947841,
                        lat: 22.530666
                    }, {
                        lng: 113.947895,
                        lat: 22.531392
                    });
                    this.polylinePath2.push({
                        lng: 113.947895,
                        lat: 22.531392
                    }, {
                        lng: 113.948218,
                        lat: 22.531483
                    }, {
                        lng: 113.949188,
                        lat: 22.532076
                    }, {
                        lng: 113.947958,
                        lat: 22.532502
                    });
                    let device = res.data.data;
                    if (typeof device != "undefined" && device != null) {
                        // let right_cs = document.getElementById("right_cs");
                        // right_cs.style.display = "none";
                        // let bottom_exit = document.getElementById("bottom_exit");
                        // bottom_exit.style.display = "block";
                        // let right_detail = document.getElementById("right_detail");
                        // right_detail.style.display = "block";
                        _this.queryShow = false;
                        _this.trajectoryShow = true;
                        _this.csShow = false;
                        _this.exitShow = true;
                        _this.detailShow = true;
                        this.deviceInfo = {
                            busNumber: device.busNumber,
                            busDriver: device.busDriver,
                            busCompany: device.busCompany,
                            busRegRoute: device.busRegRoute,
                            busRunRoute: device.busRunRoute,
                            WiFiCount: device.wifiCollect,
                            FaceCount: device.faceCollect,
                            WarningCount: device.alarmCollect,
                            BToothCount: device.bluthCollect,
                            LocationCount: device.gpsCollect,
                            AlarmCount: device.alarmCollect,
                        };
                    } else {
                        _this.detailShow = false;
                    }
                })
                .catch();
        },
        exitDetail() {
            let _this = this;
            _this.csShow = false;
            _this.exitShow = false;
            _this.detailShow = false;
            _this.queryShow = true;
            _this.trajectoryShow = false;
            this.polylinePath1 = [];
            this.polylinePath2 = [];
            this.locationTimeInterval = setInterval(this.showLocation(), 10000);
        },
        updateLocation() {
            // this.showLocation();
            this.locationTimeInterval = setInterval(this.showLocation(), 10000);
        },
        showLocation() {
            this.$axios({
                method: "get",
                url: "/location/getAllPosition",
            }).then((res) => {
                let position = res.data.data;
                this.items = {};
                for (let i = 0; i < position.length; i++) {
                    var icon = "";
                    if (position[i].deviceId != this.currentDeviceId) {
                        icon = {
                            url: "../../static/img/lvlocation.png",
                            size: {
                                width: 27,
                                height: 35
                            },
                            opts: {
                                anchor: {
                                    width: 35,
                                    height: -15
                                },
                            },
                        };
                    } else {
                        icon = {
                            url: "../../static/img/lvclicklocation.png",
                            size: {
                                width: 32,
                                height: 42
                            },
                            opts: {
                                anchor: {
                                    width: 40,
                                    height: -11.5
                                },
                            },
                        };
                    }
                    let wgs84togcj02 = this.coordtransform.wgs84togcj02(
                        position[i].flongitude,
                        position[i].flatitude
                    );
                    let gcj02tobd09 = this.coordtransform.gcj02tobd09(
                        wgs84togcj02[0],
                        wgs84togcj02[1]
                    );
                    this.items[position[i].deviceId] = {
                        deviceId: position[i].deviceId,
                        icon: icon,
                        position: {
                            lng: gcj02tobd09[0],
                            lat: gcj02tobd09[1]
                        },
                    };
                }
            });
        },
        getAreaProject() {
            let _this = this;
            this.$axios
                .get("/project/getAll")
                .then((res) => {
                    console.log(res.data);
                    // if (res.data.code == "20011"){
                    //     console.log(res.data.code == "20011");
                    //     _this.$router.push('/');
                    // }
                    res.data.data.forEach((pro) => {
                        _this.project.push({
                            value: pro.pid,
                            label: pro.proName,
                        });
                    });
                })
                .catch();
        },
        searchReset() {
            let _this = this;
            _this.csShow = false;
            _this.valueArea = [];
            _this.valueProject = "";
            _this.busNumber = "";
            _this.items = {};
            this.locationTimeInterval = setInterval(this.showLocation(), 10000);
        },
        searchArea() {
            let _this = this;
            
            let proId = _this.valueProject;
            let regionCode =
                _this.valueArea.length == 0 ?
                "" :
                _this.valueArea[_this.valueArea.length - 1];
            let busNumber = _this.busNumber;
            clearInterval(_this.locationTimeInterval);
             _this.csShow = false;
            setTimeout(() => {
                _this.pointsShow(proId, regionCode, busNumber);
                _this.locationTimeInterval = setInterval(() => {
                    _this.pointsShow(proId, regionCode, busNumber);
                }, 10000);
            }, 0);
        },
        // 展示点位
        pointsShow(proId, regionCode, busNumber) {
            let _this = this;
            _this.$axios
                .get(
                    "location/selectPosition?proId=" +
                    proId +
                    "&regionCode=" +
                    regionCode +
                    "&busNumber=" +
                    busNumber
                )
                .then((res) => {
                    let position = res.data.data;
                    if (position.length == 0) {
                        _this.$message.error("无录入设备定位信息");
                        clearInterval(_this.locationTimeInterval);
                    } else {
                        _this.items = {};
                        for (let i = 0; i < position.length; i++) {
                            var icon = "";
                            if (position[i].deviceId != _this.currentDeviceId) {
                                icon = {
                                    url: "../../static/img/lvlocation.png",
                                    size: {
                                        width: 27,
                                        height: 35
                                    },
                                    opts: {
                                        anchor: {
                                            width: 35,
                                            height: -15
                                        },
                                    },
                                };
                            } else {
                                icon = {
                                    url: "../../static/img/lvclicklocation.png",
                                    size: {
                                        width: 32,
                                        height: 42
                                    },
                                    opts: {
                                        anchor: {
                                            width: 40,
                                            height: -11.5
                                        },
                                    },
                                };
                            }
                            let wgs84togcj02 = _this.coordtransform.wgs84togcj02(
                                position[i].flongitude,
                                position[i].flatitude
                            );
                            let gcj02tobd09 = _this.coordtransform.gcj02tobd09(
                                wgs84togcj02[0],
                                wgs84togcj02[1]
                            );
                            _this.items[position[i].deviceId] = {
                                deviceId: position[i].deviceId,
                                icon: icon,
                                position: {
                                    lng: gcj02tobd09[0],
                                    lat: gcj02tobd09[1]
                                },
                            };
                        }
                    }
                })
                .catch((e) => {
                    console.log(e);
                });
        },
        StringIsNull(str) {
            return typeof str != "undefined" || str != null ? str : "暂无设备信息";
        },
    },
    components: {
        MyOverlay,
    },
    // activated() {
    //   this.updateLocation();
    // },
};
</script>

<style scoped>
@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

/* 地图区 */
/* #BDmap >>> .BMap_noprint {
  display: none;
} */
button {
    cursor: pointer;
}

#BDmap>>>.anchorBL {
    display: none;
}

/* 底部详情区 */
.bottom_xingshi>div {
    display: inline-block;
    width: 48%;
    line-height: 40px;
    text-align: right;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
}

.bottom_xingshi>div:nth-of-type(1) {
    padding-right: 14px;
    background: url(../../static/img/line_B.png) no-repeat;
    background-size: 34px 4px;
    background-position: 30px 18px;
}

.bottom_xingshi>div:nth-of-type(2) {
    padding-right: 36px;
    background: url(../../static/img/line_G.png) no-repeat;
    background-size: 34px 4px;
    background-position: 5px 18px;
}

.bottom_xingshi {
    width: 280px;
    height: 40px;
    background: #ffffff;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    position: absolute;
    left: 50%;
    bottom: 56px;
    transform: translateX(-50%);
}

.bottom_tuichu {
    width: 280px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    background: #3c74e3;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    cursor: pointer;
}

/* 右侧车辆详情区 */
.right_detail>button {
    width: 96px;
    height: 32px;
    background: #ffffff;
    border: 1px solid #3c74e3;
    border-radius: 4px;
    margin: 10px -4px 0 8px;
    color: #3c74e3;
}

.right_detail>span:nth-of-type(1) {
    background: url(../../static/img/JSY.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(2) {
    background: url(../../static/img/lou.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(3) {
    background: url(../../static/img/dengji.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(4) {
    background: url(../../static/img/luxian.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(5) {
    background: url(../../static/img/lanya.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(6) {
    background: url(../../static/img/renlian.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(7) {
    background: url(../../static/img/yujing.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(8) {
    background: url(../../static/img/WIFI.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(9) {
    background: url(../../static/img/dingwei.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span:nth-of-type(10) {
    background: url(../../static/img/baojing.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_detail>span {
    width: 100px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0px;
    color: #666666;
    padding-left: 32px;
}

.right_detail>div {
    width: 200px;
    height: 31px;
    background: #f8f8f8;
    border-radius: 4px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 31px;
    text-align: center;
    color: #323232;
    margin: 8px auto;
    box-shadow: 0px 0px 4px -1px #888888;
}

.right_detail>div:nth-of-type(1) {
    margin-bottom: 16px;
}

/* 右侧出事公交车 */
.right_cs {
    width: 216px;
    height: 700px;
    background: #ffffff;
    border-radius: 4px;
    position: absolute;
  
    top: 9px;
    right: 8px;
}
.right_content::-webkit-scrollbar{
    display: none;

}
.right_cs>.right_content{
    height: 620px;
    width: 100%;
      overflow-y:scroll;
}
.right_cs>button {
    position:absolute;
    bottom: 24px;
    width: 200px;
    height: 36px;
    background: #3c74e3;
    border: 1px solid #3c74e3;
    border-radius: 4px;
    margin: 10px -4px 0 8px;
    color: #ffffff;
}

.right_cs>span:nth-of-type(1){
    background: url(../../static/img/shebeiMC.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.oneline {
    background: url(../../static/img/Ygreen.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
    margin-left: 43px;
}

.cam_list>.cam_img {
    background: url(../../static/img/shext.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
        width: 100px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0px;
    color: #666666;
    padding-left: 32px;
}
.cam_list > .cs_data{
    width: 200px;
    height: 31px;
    background: #f8f8f8;
    border-radius: 4px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 31px;
    text-align: center;
    color: #323232;
    margin: 8px auto;
    box-shadow: 0px 0px 4px -1px #888888; 
}
.outline {
    background: url(../../static/img/Yorange.png) no-repeat;
    background-size: 20px 20px;
    background-position: 12px 0px;
    margin-left: 74px;
}

.inline {
    background: url(../../static/img/Ygreen.png) no-repeat;
    background-size: 20px 20px;
    background-position: 12px 0px;
    margin-left: 74px;
}

/* .right_cs > span:nth-of-type(5) {
  background: url(../../static/img/shext.png) no-repeat;
  background-size: 14px 14px;
  background-position: 12px 3px;
} */
/* .right_cs > span:nth-of-type(6) {
  background: url(../../static/img/Yorange.png) no-repeat;
  background-size: 14px 14px;
  background-position: 12px 3px;
  margin-left: 74px;
} */
.right_content>.pic_img {
    background: url(../../static/img/tupian.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_content>.wifi_img {
    background: url(../../static/img/WIFI.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_content>.bt_img {
    background: url(../../static/img/lanya.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_content>.jw_img {
    background: url(../../static/img/jingweidu.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_cs>span:nth-of-type(11) {
    background: url(../../static/img/jingweidu.png) no-repeat;
    background-size: 14px 14px;
    background-position: 12px 3px;
}

.right_content>span {
    width: 100px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0px;
    color: #666666;
    padding-left: 32px;
}

.right_content>.cs_data {
    width: 200px;
    height: 31px;
    background: #f8f8f8;
    border-radius: 4px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 31px;
    text-align: center;
    color: #323232;
    margin: 8px auto;
    box-shadow: 0px 0px 4px -1px #888888;
}

.right_cs>div:nth-of-type(1) {
    margin-bottom: 16px;
}

/* 查看轨迹 */
.right_detail {
    width: 216px;
    height: 760px;
    background: #ffffff;
    border-radius: 4px;
    position: absolute;
    top: 9px;
    right: 8px;
}

.CKGJ>button:nth-of-type(2) {
    color: #fff;
    background: url(../../static/img/serch.png) no-repeat #3c74e3;
    background-size: 15px 15px;
    background-position: 14px 10px;
}

.CKGJ>button:nth-of-type(1) {
    background: url(../../static/img/sx.png) no-repeat #fff;
    background-size: 15px 15px;
    background-position: 14px 10px;
}

.CKGJ>button {
    float: right;
    width: 80px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    margin: 12px 8px;
    padding-left: 26px;
    box-sizing: border-box;
    font-size: 14px;
}

.CKGJ>span:nth-of-type(2) {
    position: absolute;
    left: 254px;
}

.el-input>>>.el-input__prefix {
    right: -90px !important;
}

.el-input>>>.el-input__inner {
    width: 180px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding-left: 8px;
}

.el-input:nth-of-type(1) {
    position: absolute;
    top: 12px;
    left: 292px;
}

.el-input:nth-of-type(2) {
    position: absolute;
    top: 11px;
    left: 82px;
}

.CKGJ>span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 60px;
    color: #666666;
    padding-left: 16px;
}

.CKGJ {
    width: 678px;
    height: 60px;
    background: #ffffff;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    position: absolute;
    left: 16px;
    top: 8px;
}

.map_content {
    width: 100%;
    height: calc(100% - 2px);
    position: relative;
}

.dt {
    width: 100%;
    height: calc(100% - 44px);
}

.map {
    position: absolute;
    top: 0%;
    width: 100%;
    height: 100%;
}

.anchorBL {
    display: none;
}

/* 区域 */
.quyu {
    width: 216px;
    height: 364px;
    background-color: #ffffff;
    position: absolute;
    top: 8px;
    left: 16px;
    border-radius: 4px;
}

.ZTinpt>span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.6);
    padding-top: 16px;
}

.ZTinpt {
    padding-left: 8px;
    padding-top: 13px;
}

/* .el-select >>> .el-input__inner,
.el-input >>> .el-input__inner {
  width: 200px;
  height: 36px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding-left: 8px;
  box-sizing: border-box;
} */
.chepai>>>.el-input__inner {
    width: 200px;
    height: 36px;
    margin-left: -285px;
    margin-top: 200px;
}

.qy_xz>>>.el-input__inner {
    width: 200px;
    height: 36px;
}

.quyu button:nth-of-type(2) {
    color: #fff;
    background: url(../../static/img/serch.png) no-repeat #3c74e3;
    background-size: 15px 15px;
    background-position: 74px 10px;
    margin: 4px 8px 4px 8px;
}

.quyu button:nth-of-type(1) {
    background: url(../../static/img/sx.png) no-repeat #fff;
    background-size: 15px 15px;
    background-position: 74px 10px;
    margin: 54px 8px 4px 8px;
}

.quyu button {
    float: right;
    width: 200px;
    height: 36px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    padding-left: 26px;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFang SC;
    color: rgba(0, 0, 0, 0.6);
}

.sq {
    background: url(../../static/img/sq.png) no-repeat;
    width: 14px;
    height: 12px;
    background-size: 14px 12px;
    margin-left: 101px;
    margin-top: 140px;
}
</style>
